@import url("../palette.less");

.button {
  display: inline-block;
  line-height: 1;
  font-weight: 600;
  border-radius: 3px;
  box-shadow: 0 2px rgba(0,0,0, .05);
  cursor: pointer;
  font-size: 14px;
  padding: 12px 16px;

  &:active {
    box-shadow: inset 0 2px rgba(0,0,0, .05);
  }
  &:focus {
    outline: none;
  }
}

// Priority concerns
// - font color, background, and border

.button-default {
  color: @90;
  background: #fff;
  border: 1px solid @trim-dark;
  &:hover, &:focus, &:active {
    color: @100;
    border-color: @trim-darkest;
  }
}

.button-primary {
  color: #fff;
  background: @purple;
  border: 1px solid @purple-darkest;
  &:hover, &:focus, &:active {
    color: #fff;
    background: @purple-dark;
    border-color: darken(@purple-darkest, 5);
  }
}

.button-danger {
  color: #fff;
  background: @red;
  border: 1px solid @red-dark;
  &:hover, &:focus, &:active {
    color: #fff;
    background: @red-dark;
    border-color: darken(@red-darkest, 5);
  }
}

.button-disabled {
  color: @50;
  background: #fff;
  border: 1px solid @trim;
  cursor: not-allowed;
  box-shadow: none;

  &:hover, &:focus, &:active {
    color: @50;
    background: #fff;
    border-color: @trim;
  }
}

// Size Concerns
// - Padding and font size

.button-xs {
  padding: 6px 10px;
  font-size: 12px;
}

.button-sm {
  padding: 8px 12px;
  font-size: 12px;
}

.button-lg {
  font-size: 16px;
  padding: 14px 20px;
}

